﻿<%@ Page Language="C#" AutoEventWireup="true" MasterPageFile="~/Templates/Wide/Wide.Master" CodeBehind="DeviceIntro.aspx.cs" Inherits="WebApp.DeviceIntro" %>

<asp:Content ID="Content1" ContentPlaceHolderID="_ctlContentMainHead" runat="server">
    <link rel="stylesheet" title="Standard" href="Resources/js/contentflow/contentflow.css"
        type="text/css" media="screen" />
    <script language="JavaScript" type="text/javascript" src="Resources/js/contentflow/contentflow.js"></script>
    <script tyle="text/javascript">
        var cf = new ContentFlow('contentFlow', { reflectionColor: "#FFFFFF", maxItemHeight: 0, startItem: 0, fixItemSize: false });
    </script>
    <style>
        .caption
        {
            color: #000 !important;
        }
        .caption p
        {
            width: 500px;
            margin: 0 auto;
            font-size: 1.4em;
            font-family: 微软雅黑,宋体;
        }
    </style>
    <script>
        var calcHeight = function () {
            $('#contentFlow').height($(window).height() - 200);
        }

        $(document).ready(function () {
            calcHeight();
            //                           $('#header-bar a.close').mouseover(function () {
            //                               $('#header-bar a.close').addClass('activated');
            //                           }).mouseout(function () {
            //                               $('#header-bar a.close').removeClass('activated');
            //                           });
        });

        $(window).resize(function () {
            calcHeight();
        }).load(function () {
            calcHeight();
        });
    </script>
</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="_ctlContentMainBody" runat="server">
        <!-- ===== FLOW ===== -->
        <div id="contentFlow" class="ContentFlow" style="width:100%; height:100%;">
            <!-- should be place before flow so that contained images will be loaded first -->
            <div class="loadIndicator">
                <div class="indicator">
                </div>
            </div>
            <div class="flow">
                <div class="item">
                    <img class="content" src="Resources/Images/device/助听器原理.png" />
                    <div class="caption">
                        <h3>
                            pic0: some stripes</h3>
                        <br />
                        <p>
                            助听器是一个电声放大器，将微弱的声音扩大到适应人耳需要的强度。助听器主要由传声器（microphone，音译为麦克风）、放大器、受话器（receiver，耳机）、电池、各种音量、音调控制旋钮等电声学器件组成。
                        </p>
                    </div>
                </div>
                <div class="item">
                    <img class="content" src="Resources/Images/device/助听器原理2.png" />
                    <div class="caption">
                        pic1: some stripes
                        <p>
                            言语处理器：在体外的处理器通过麦克风接受声音。声波振动：声音引起的振动通过颅骨和颌骨传输到内耳。内耳：这种运动使内耳（耳蜗）里的液体推动毛细胞。听觉神经：毛细胞把这种运动变成电脉冲，这种电脉冲沿着听觉神经一直传送到大脑进行处理，于是您就听到了声音。</p>
                    </div>
                </div>
                <div class="item">
                    <img class="content" src="Resources/Images/device/盒式助听器.png" />
                    <div class="caption">
                        pic2: some stripes</div>
                </div>
                <div class="item">
                    <img class="content" src="Resources/Images/device/耳内式助听器.png" />
                    <div class="caption">
                        pic1: some stripes</div>
                </div>
                <div class="item">
                    <img class="content" src="Resources/Images/device/耳背式助听器.png" />
                    <div class="caption">
                        pic0: some stripes</div>
                </div>
            </div>
            <div class="globalCaption">
            </div>
<%--            <div class="scrollbar" style="visibility:hidden">
                <div class="slider">
                    <div class="position">
                    </div>
                </div>
            </div>--%>
        </div>
        </asp:Content>